/*
 * ♂（￣▽￣）／
 * @Author: WebZhouT(243574263@qq.com)
 * @Date: 2018/1/16 9:55
 * @Last Modified by: WebZhouT
 * @Last Modified time: 2018-01-29 16:19:01
 */
@basecolor:#1ed9d2;/*主色调*/
@fontcolor :#1ed9d2;/*按钮颜色*/
@start :#20c1f6; /*渐变开始颜色*/
@end :#298bee; /*结束颜色*/
@warm:#ff0000;
@shadow : 0px 12px 28px 0px rgba(30, 217, 210, 0.28);/*外框颜色*/
/*定义基准rem（转变为rem单位）*/
@r: 64rem;
/*定义字体(多倍屏)*/
.px2px(@name, @px){
    @{name}: round(@px / 2) * 1px;
  [data-dpr="2"] & {
      @{name}: @px * 1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
      @{name}: round(@px * 2.5 / 2) * 1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
      @{name}: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
      @{name}: round(@px / 2 * 3) * 1px
  }
  // for 三星note4
  [data-dpr="4"] & {
      @{name}: @px * 2px;
  }
}
/*顶部导航*/
#header{
  height: 88/@r;
  line-height:88/@r;
  z-index: 10;
  position: fixed;
  width: 100%;
  top: 0;
  left:0;
  .header{
    padding: 0 30/@r;
    height: 88/@r;
    display: block;
    background-color: #fff;
  }
  .header.w-header{
    background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#28dbd1),to(#84eac8));
    background-image: -moz-linear-gradient(left 45deg, #28dbd1, #84eac8);
    background-image: -o-linear-gradient(45deg, #28dbd1, #84eac8);
    background-image: linear-gradient(45deg, #28dbd1, #84eac8);
    background-size: cover;

    .header-tit{
      color: #fff;
    }
    .icon-houtui{
      font-size: 36/@r;
      display: block;
      line-height: 88/@r;
      color: #fff;

    }
  }
  .header-left{
    display: inline-block;
    position: absolute;
    top: 0;
    .px2px(font-size,36);
    line-height:88/@r;
    vertical-align: top;
    color: #fff;
    width: 20%;
    text-align: left;
    .icon-houtui{
      .px2px(font-size,36);
      display: block;
      line-height: 88/@r;
      color: @basecolor;
    }
  }
  .header-right{
    display: inline-block;
    .px2px(font-size,36);
    line-height:88/@r;
    text-align: center;
    overflow: hidden;
    position: absolute;
    right: 30/@r;
    top: 0;
    .header-more{
      display: block;
      .px2px(font-size,36);
      color: @basecolor;
      line-height:88/@r;
    }
    .save,.baocun{
      display: block;
      .px2px(font-size,30);
      line-height:88/@r;
      color: #fff;
    }
    .icon-xiaoxi,.icon-shuoming,.icon-bangzhu1{
      display: block;
      .px2px(font-size,40);
      line-height:88/@r;
      color: #fff;
    }
  }
  .header-tit{
    text-align: center;
    padding: 0  50/@r;
    line-height:88/@r;
    .px2px(font-size,32);
    display:block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    color: @basecolor;
  }
  .header-tit.bj-w{
    color: #fff;
    background-color: @basecolor;
  }
  .header-tit.line{
    width: 100%;
    margin-left: -0.31rem;
  }
}
/*注册页面登录页面*/
#main-form{
  margin:20/@r 28/@r 40/@r 28/@r;
  border:1px solid #e5e5e5;
  border-radius: 8/@r;
  background-color: #fff;
  box-shadow: 0 12px 28px 0 rgba(30, 217, 210, 0.28);
  .tw-list{
    height:80/@r;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 30/@r;
    overflow: hidden;
    display: block;
    .fl{
      display: inline-block;
      width: 30%;
      .px2px(font-size,30);
      line-height:80/@r;
      color: #333333;
      text-align: center;
      input{
        color: #cccccc;
      }
    }
    .fr{
      display: inline-block;
      width: 70%;
      height:80/@r;
      input{
        display: inline-block;
        line-height:80/@r;
        width: 100%;
        .px2px(font-size,30);
        color:#999;
        border: none;
        margin: 0;
        padding: 0;
      }
      input::-webkit-input-placeholder{
        color:#ccc;
      }
      .iconfont{
        display: inline-block;
        width: 20%;
        .px2px(font-size,30);
        color: #ccc;
        line-height: 80/@r;
      }
      .iconfont.sure{
        color: @basecolor;
      }
    }
    #picker1,#picker2{
      .px2px(font-size,30);
      line-height:80/@r;
      color:#999;
      display: block;
    }
  }
  .th-list{
    border-bottom: 1px solid #e5e5e5;
    margin: 0rem 30/@r;
    >.tit{
      width: 30%;
      display: inline-block;
      color: #333;
      line-height:80/@r;
      text-align: center;
      .px2px(font-size,30);
    }
    .con{
      width: 40%;
      height:80/@r;
      display: inline-block;
      font-size: 24/@r;
      input{
        line-height:80/@r;
        .px2px(font-size,30);
        text-align: left;
        border: 0;
        width: 100%;
        color: #cccccc;
        margin: 0;
      }
      input::-webkit-input-placeholder{
        color:#ccc;
      }
    }
    .forget{
      width: 30%;
      display: inline-block;
      text-align: center;
      .btn{
        color: #fff;
        border-radius: 30/@r 30/@r 30/@r;
        margin-top: 10/@r;
        background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#28dbd1),to(#84eac8));
        background-image: -moz-linear-gradient(left -45deg, #28dbd1, #84eac8);
        background-image: -o-linear-gradient(-45deg, #28dbd1, #84eac8);
        background-image: linear-gradient(-45deg, #28dbd1, #84eac8);
        .px2px(font-size,30);
        line-height: 60/@r;
        display: block;
      }
      .btn.ugy{
        background: #999;
      }
    }
  }
  .rpassword{
    border-bottom: none;
  }
}
/*用户登录*/
/*登录 注册 修改密码*/
.Login-index{
  padding: 148/@r 30/@r 0 30/@r;
  .logo{
    width:300/@r;
    display: block;
    margin: 0 auto 80/@r auto;
  }
  .phone,.password{
    margin-bottom:20/@r;
    .iconfont{
      width: 20%;
      text-align: center;
      .px2px(font-size,60);
      color: #666;
      display: inline-block;
      line-height:80/@r;
    }
    input{
      width: 80%;
      display: inline-block;
      border: none;
      background-color: #fff;
      text-align: left;
      color: #666;
      .px2px(font-size,30);
      line-height:80/@r;
      border-radius:40/@r 40/@r 40/@r 40/@r;
    }
  }
  .yzm{
    border-radius:40/@r 40/@r 40/@r 40/@r;
    border: 1px solid #e5e5e5;
    display: block;
    background-color: #fff;
    margin-bottom: 20/@r;
    width: 90%;
    padding-left: 10%;
    .con{
      width: 70%;
      display: inline-block;
      input{
        display: block;
        text-align: center;
        width: 100%;
        border-radius:40/@r 40/@r 40/@r 40/@r;
        border: none;
        .px2px(font-size,30);
        line-height:80/@r;
      }
    }
    .forget{
      width: 30%;
      height: 100%;
      display: block;
      .btn{
        display: block;
        text-align: center;
        line-height:80/@r;
        color: #e8454a;
        .px2px(font-size,24);
      }
    }
  }
  .btn-group{
    padding: 0 30/@r;
    .forget,.register{
      .px2px(font-size,24);
      line-height:60/@r;
      color: @basecolor;
    }
  }
  .tw-list{
    background-color: #fff;
    height:80/@r;
    border: 1px solid #e5e5e5;
    border-radius: 8/@r;
    .fl{
      display: inline-block;
      width: 30%;
      color: #333;
      .px2px(font-size,30);
      line-height:80/@r;
      text-align: center;
    }
    .fr{
      display: inline-block;
      width: 70%;
      height:80/@r;
      input{
        display: inline-block;
        line-height:80/@r;
        width: 100%;
        .px2px(font-size,30);
        color:#cccccc;
        border: none;
        margin: 0;
        padding: 0;
      }
    }
  }
  .th-list{
    margin-top:14/@r;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    .tit{
      width: 30%;
      display: inline-block;
      color: #333;
      line-height:80/@r;
      text-align: center;
      .px2px(font-size,30);
    }
    .con{
      width: 40%;
      display: inline-block;
      .px2px(font-size,30);
      input{
        line-height:80/@r;
        .px2px(font-size,30);
        text-align: left;
        border: 0;
        margin: 0;
        width: 100%;
      }
      .icon-yanjing{
        width: 30%;
        display: inline-block;
        line-height:80/@r;
        .px2px(font-size,30);
        color: #ccc;
        text-align: center;
      }
    }
    .forget{
      width: 30%;
      display: inline-block;
      text-align: center;
      .btn{
        .px2px(font-size,30);
        color: @basecolor;
        line-height: 80/@r;
      }
    }
    .icon-yanjing{
      width: 30%;
      display: inline-block;
      line-height:80/@r;
      .px2px(font-size,30);
      color: #ccc;
      text-align: center;
    }
    .icon-yanjing.sure{
      color: @basecolor;
    }
  }
  .tip{
    text-align: center;
    .px2px(font-size,30);
    line-height:80/@r;
    color: #FF0000;
    span{
      .px2px(font-size,30);
      display: block;
    }
    .re{
      color: #FF0000;
    }
    .gr{
      color: #00b058;
    }
  }
  .login{
    text-align: center;
    color: @basecolor;
    .px2px(font-size,24);
    display: block;
    line-height: 60/@r;
  }
  /*复选框*/
  .check_box{
    position: relative;
    padding-left: 60/@r;
    color: @basecolor;
    .px2px(font-size,24);
    width: 300/@r;
    margin: auto;
    line-height: 72/@r;
    a{
      color: @basecolor;
      .px2px(font-size,24);
    }
    label{
      width:32/@r;
      height:32/@r;
      position:absolute;
      top:16/@r;
      left:0;
      border:1px solid @basecolor;
      border-radius:4/@r;
      cursor:pointer;
    }
    #check_2{
      position: absolute;
      left:0;
      top:16/@r;
      opacity: 0;
    }
    label:hover{
      border:2px solid @basecolor;
    }
    label:after{
      content:'';
      width:16/@r;
      height:8/@r;
      position:absolute;
      top:8/@r;
      left:6/@r;
      /*            border:2px solid #cacaca;*/
      border-top:none;
      border-right:none;
      opacity:0.4;
      transform:rotate(-45deg); /*-webkit-transform:rotate(-45deg);*/
    }
    label:hover:after{
      /*border:2px solid #fff;*/
      border-top:none;
      border-right:none;
    }
    input:checked + label{
      border:2px solid @basecolor;
    }
    input:checked + label:after{
      opacity:1;
      border:2px solid @basecolor;
      border-top:none;
      border-right:none;
    }
    em{
      margin:0 0 0 5px;
    }
  }
  /*图形验证码*/
  #yzm-shadow-box{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 12;
    #yzm-png-box{
      width: 300px;
      height: 240px;
      position: absolute;
      left: 50%;
      margin-left: -150px;
      top: 50%;
      margin-top: -120px;
      background-color: #fff;
      border-radius: 6px;
      h5{
        font-size: 18px;
        text-align: center;
        display: block;
        border-bottom: 1px solid #e5e5e5;
        line-height:30px;
      }
      #yz-png{
        display: block;
        width: 200px;
        margin: 20px auto;
      }
      /*按钮组*/
      .png-btn-box{
        border-top: 1px solid #e5e5e5;
        position: absolute;
        bottom: 0px;
        width: 100%;
        .png-btn{
          width: 50%;
          display: inline-block;
        }
        .sure-btn{
          border-right: 1px solid #e5e5e5;
        }
        .sure-btn,.cancel-btn{
          font-size: 16px;
          line-height: 40px;
          text-align: center;
          color: #666;
          display: block;
          width: 100%;
        }
      }
      .png-btn-box:last-child{
        .sure-btn{
          border-right: none;
        }
      }
      /*图形输入*/
      .yzm-png{
        margin: 10px 0;
        .tit{
          display: inline-block;
          width: 40%;
          font-size: 16px;
          line-height: 30px;
          text-align: center;
        }
        .con{
          display: inline-block;
          width: 60%;
          .yzm-png-con{
            font-size: 16px;
            line-height: 30px;
            width: 100%;
            display: block;
            margin: 0;
            padding: 0;
          }
        }
      }
      .yzm-msg{
        .re{
          color: #ff0000;
          .px2px(font-size, 14);
          line-height: 20/@r;
        }
        .gr{
          color: #00b058;
          .px2px(font-size, 14);
          line-height: 20/@r;
        }
      }
    }

  }
  /*验证码阴影弹窗*/
  #yz-shadow{
    position: fixed;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
    z-index:12;
    left:0;
    top:0;
    display: none;
    .txt{
      display: block;
      width: 80%;
      left: 50%;
      margin-left: -40%;
      top:30%;
      position: absolute;
      .icon-guanbi{
        float: right;
        .px2px(font-size, 60);
        width: 80/@r;
        height:80/@r;
        text-align: center;
        margin-top: -60/@r;
        margin-right: -20/@r;
        color: #fff;
      }
      .icon-guanbi:active{
        background-color: rgba(0,0,0,0);
      }
      .box{
        padding: 40/@r 30/@r;
        background-color: #fff;
        border-radius: 12/@r;
        font-size: 30/@r;
        color: #333;
        text-align: left;
      }
    }
  }
}
#Login-register{
  .tit-top{
    line-height:60/@r;
    .px2px(font-size,24);
    text-align: left;
    font-weight: bold;
    border-radius: 40/@r;
    padding-left: 40/@r;
    color: #333;
  }
  .form{
    margin: 20/@r 28/@r 40/@r 28/@r;
    box-shadow: @shadow;
    border:1px solid #e5e5e5;
    border-radius:10/@r;
    background-color: #fff;
    .tw-list{
      height:80/@r;
      border-bottom: 1px solid #e5e5e5;
      margin: 0 30/@r;
      overflow: hidden;
      .fl{
        display: inline-block;
        width: 30%;
        .px2px(font-size,30);
        line-height:80/@r;
        color: #333333;
        text-align: center;
        input{
          color: #cccccc;
        }
      }
      .fr{
        display: inline-block;
        width: 70%;
        height:80/@r;
        input{
          display: inline-block;
          line-height:80/@r;
          width: 80%;
          .px2px(font-size,30);
          color:#999;
          border: none;
          margin: 0;
          padding: 0;
        }
        input::-webkit-input-placeholder{
          color:#ccc;
        }
        .iconfont{
          display: inline-block;
          width: 20%;
          color: #ccc;
          .px2px(font-size,30);
          line-height: 80/@r;
        }
        .iconfont.sure{
          color: @basecolor;
        }
      }
      #picker1,#picker2{
        line-height:4rem;
        .px2px(font-size,24);
        color:#999;
        display: block;
      }
    }
    .th-list{
      border-bottom: 1px solid #e5e5e5;
      margin: 0rem 30/@r;
      >.tit{
        width: 30%;
        display: inline-block;
        color: #333;
        line-height:80/@r;
        text-align: center;
        .px2px(font-size,30);
      }
      .con{
        width: 40%;
        height:80/@r;
        display: inline-block;
        .px2px(font-size,24);
        input{
          line-height:80/@r;
          text-align: left;
          .px2px(font-size,30);
          border: 0;
          width: 100%;
          color: #cccccc;
          margin: 0;
        }
        input::-webkit-input-placeholder{
          color:#ccc;
        }
      }
      .forget{
        width: 30%;
        display: inline-block;
        text-align: center;
        .btn{
          color: #fff;
          border-radius: 30/@r 30/@r 30/@r;
          margin-top: 10/@r;
          background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#28dbd1),to(#84eac8));
          background-image: -moz-linear-gradient(left -45deg, #28dbd1, #84eac8);
          background-image: -o-linear-gradient(-45deg, #28dbd1, #84eac8);
          background-image: linear-gradient(-45deg, #28dbd1, #84eac8);
          .px2px(font-size,30);
          line-height: 60/@r;
          display: block;
        }
      }
    }
    .rpassword{
      border-bottom: none;
    }
  }
  .tip{
    text-align: center;
    line-height:80/@r;
    .px2px(font-size,30);
    color: #FF0000;
    span{
      display: block;
    }
    .re{
      color: #ff0000;
    }
    .gr{
      color: #00b058;
    }
  }
  .check_box{
    position: relative;
    padding-left: 60/@r;
    color: #333;
    margin: 0 2rem;
    .px2px(font-size,24);
    line-height: 72/@r;
    a{
      color: @basecolor;

      .px2px(font-size,24);
    }
    label{
      width:32/@r;
      height:32/@r;
      position:absolute;
      top:16/@r;
      left:0;
      border:1px solid #cacaca;
      border-radius:4/@r;
      background:#fff;
      cursor:pointer;
    }
    #check_2{
      position: absolute;
      left:0;
      top:16/@r;
    }
    label:hover{
      border:2px solid @basecolor;
    }
    label:after{
      content:'';
      width:16/@r;
      height:8/@r;
      position:absolute;
      top:8/@r;
      left:6/@r;
      border:2px solid #cacaca;
      border-top:none;
      border-right:none;
      opacity:0.4;
      transform:rotate(-45deg); /*-webkit-transform:rotate(-45deg);*/
    }
    label:hover:after{
      border:2px solid @basecolor;
      border-top:none;
      border-right:none;
    }
    input:checked + label{
      border:2px solid @basecolor;
    }
    input:checked + label:after{
      opacity:1;
      border:2px solid @basecolor;
      border-top:none;
      border-right:none;
    }
    em{
      margin:0 0 0 5px;
    }
  }
}
#User-register{
  .tit-top{
    line-height:60/@r;
    .px2px(font-size,24);
    text-align: left;
    font-weight: bold;
    border-radius: 4/@r;
    padding-left: 40/@r;
    color: #333;
  }
  .tip{
    text-align: center;
    .px2px(font-size,30);
    color: #FF0000;
    span{
      display: block;
      text-align: center;
      .px2px(font-size,30);
      line-height:80/@r;
    }
    .re{
      color: @warm;
    }
    .gr{
      color: @basecolor;
    }
  }
  /*验证码阴影弹窗*/
  #yz-shadow{
    position: fixed;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
    z-index:12;
    left:0;
    top:0;
    display: none;
    .txt{
      display: block;
      width: 80%;
      left: 50%;
      margin-left: -40%;
      top:30%;
      position: absolute;
      .icon-guanbi{
        float: right;
        .px2px(font-size, 60);
        width: 80/@r;
        height:80/@r;
        text-align: center;
        margin-top: -60/@r;
        margin-right: -20/@r;
        color: #fff;
      }
      .icon-guanbi:active{
        background-color: rgba(0,0,0,0);
      }
      .box{
        padding: 40/@r 30/@r;
        background-color: #fff;
        border-radius: 12/@r;
        font-size: 30/@r;
        color: #333;
        text-align: left;
      }
    }
  }
}
/*用户认证*/
.User-approve{
  height: 100/@r;
  padding:88/@r 20/@r 30/@r 20/@r;
}
/*认证*/
/**/
/*电话认证*/
.approve-phone{
  padding-top: 87/@r;
  .logo{
    display: block;
    em{
      background-color: @basecolor;
      color: #fff;
      font-size: 80/@r;
      line-height:108/@r;
      width: 108/@r;
      height: 108/@r;
      text-align: center;
      margin: 30/@r auto;
      display: block;
      border-radius: 8/@r;
    }
  }
  .phone,.password{
    padding: 0 30/@r;
    background-color: #fff;
    .tit{
      width: 30%;
      display: inline-block;
      line-height: 80/@r;
      color: #333333;
      .px2px(font-size,30);
    }
    input{
      width: 70%;
      display: inline-block;
      line-height:80/@r;
      border: none;
      margin: 0;
      padding: 0;
      color: #8d8d8d;
      .px2px(font-size,30);
    }
  }
  >.tit{
    line-height: 70/@r;
    color:#8d8d8d;
    .px2px(font-size,24);
    text-align: left;
    padding: 0 30/@r;
  }
  .node{
    text-align: left;
    padding: 20/@r 30/@r;
    .px2px(font-size,24);
    color:#8d8d8d;
  }
  .btn-submit{
    display: block;
    margin: 20/@r 30/@r;
    background-color: @basecolor;
    border-radius: 8/@r;
    line-height:80/@r;
    color: #fff;
    .px2px(font-size,30);
  }
  .wen{
    padding: 20/@r 30/@r 80/@r 30/@r;
    .question{
      color: @basecolor;
      line-height:40/@r;
      .px2px(font-size,24);
      text-align: left;
    }
    .ans{
      color:#8d8d8d;
      .px2px(font-size,24);
      line-height:40/@r;
      text-align: left;
    }
  }
}
/*电话认证跳转确认页面*/
.approve-phone-sure{
  padding-top: 87/@r;
  .txt{
    line-height:40/@r;
    .px2px(font-size,24);
    color: #666;
    text-align: center;
    margin-top: 30/@r;
    margin-bottom: 70/@r;
  }
  .animate{
    position: relative;
    .ball{
      position: absolute;
      width: 400/@r;
      height: 400/@r;
      margin-left: -200/@r;
      left: 50%;
    }
    .icon{
      display: block;
      width: 140/@r;
      height: 140/@r;
      line-height:140/@r;
      background-color: @basecolor;
      border-radius: 8/@r;
      color: #fff;
      text-align: center;
      .px2px(font-size,140);
      position: absolute;
      z-index:2;
      left: 50%;
      margin-left: -70/@r;
      margin-top: 110/@r;
    }
  }
  keyframes rotation{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
  }
  .Rotation{
    transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
  }
  .animate{
    height: 440/@r;
  }
  #yzm-box{
    position: fixed;
    display: none;
    width: 440/@r;
    top:30%;
    left: 50%;
    margin-left: -220/@r;
    background-color: rgba(255,255,255,0.8);
    z-index:222;
    border-radius: 8/@r;
    h4{
      color: #333;
      text-align: center;
      line-height: 60/@r;
      .px2px(font-size,28);
      font-weight: bold;
    }
    input{
      border: 0.1rem solid #e5e5e5;
      line-height: 60/@r;
      margin: 20/@r 0 20/@r 10%;
      width: 80%;
      border-radius: 8/@r;
    }
    /*    .btn-group{
          line-height:4rem;
          display: block;
          border-top: 0.1rem solid #e5e5e5;
          .close,.sure{
            width: 50%;
            display: inline-block;
            font-size: 1.4rem;
            a{
              display: block;
              text-align: center;
              line-height: 4rem;
              font-size: 1.5rem;
              color: #007aff;
            }
          }
          .close{
            a{
              border-right: 0.1rem solid #e5e5e5;
            }
          }
        }*/
    .sure{
      display: block;
      line-height:60/@r;
      .px2px(font-size,30);
      color: #0498e0;
      text-align: center;
      border:1px solid #e5e5e5;
      border-radius: 8xp/@r;
      background-color: #fff;
      margin: 0 80/@r 40/@r 80/@r;
    }
  }
  .yz-msg{
    .px2px(font-size,24);
    color: #ff0000;
    text-align: left;
    padding: 0 24/@r;
    line-height: 36/@r;
  }
  #msg{
    span{
      display: block;
      text-align: center;
      .px2px(font-size,30);
    }
  }
}
/*银行卡添加页面*/
.approve-bankcard-list{
  position: fixed;
  left:0;
  top:87/@r;
  height: 100%;
  width: 100%;
  .add-card{
    line-height: 100/@r;
    position: absolute;
    width: 100%;
    .px2px(font-size,30);
    color: #fff;
    background-color: @basecolor;
    text-align: center;
    display: block;
    bottom: 88/@r;
    left:0;
  }
  .con{
    padding: 30/@r 20/@r;
    .list{
      border-bottom: 1px solid #e5e5e5;
      display: block;
      background-color: #fff;
      border-radius: 8/@r;
      .logo{
        width: 80/@r;
        height:80/@r;
        line-height: 120/@r;
        margin-right: 40/@r;
        margin-top: 20/@r;
        margin-left: 20/@r;
      }
      .content{
        .card{
          .px2px(font-size,32);
          color: #333;
          line-height: 60/@r;
        }
        .bankname{
          .px2px(font-size,28);
          color: #666;
          line-height: 60/@r;
        }
      }
    }
  }
}
/*银行卡认证*/
.approve-bankcard{
  position: relative;
  left:0;
  top:87/@r;
  .dec{
    padding: 30/@r;
    color: #8d8d8d;
    text-align: left;
    .px2px(font-size,28);
    line-height:40/@r;
  }
  >.tit{
    line-height: 60/@r;
    .px2px(font-size,30);
    color: #8d8d8d;
    text-align: left;
    padding: 0 30/@r;
  }
  .bankcard{
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff;
    color: #333;
    text-align: left;
    padding: 0 30/@r;
    display: block;
    line-height: 84/@r;
    .px2px(font-size,30);
    em{
      color:#ccc;
      .px2px(font-size,30);
      line-height:84/@r;
      display:inline-block;
      width: 10%;
    }
    .bank{
      display: inline-block;
      color: #666;
      width: 90%;
    }
    .bank-choose{
      display: block;
      padding: 0 40/@r;
      color: #666;
    }
  }
  .city{
    input{
      display: inline-block;
      width: 100%;
      border: 0;
      margin: 0;
      line-height:84/@r;
      padding-left: 10%;
      color: #ccc;
    }
    .search{
      width: 20%;
      background-color: @basecolor;
      .px2px(font-size,30);
      line-height:84/@r;
      color: #fff;
    }
  }
  .form-list{
    background-color: #fff;
    li{
      border-bottom: 1px solid #e5e5e5;
      padding: 0 30/@r;
      .tit{
        .px2px(font-size,30);
        color: #333;
        line-height:84/@r;
        text-align: left;
        display: inline-block;
        width: 30%;
      }
      input{
        line-height:84/@r;
        border: 0;
        text-align: left;
        display: inline-block;
        width:70%;
        margin: 0;
        padding: 0;
        .px2px(font-size,28);
        color: #666;
      }
      .pro,.city{
        width: 70%;
        text-align: left;
        display: inline-block;
        line-height:84/@r;
        .px2px(font-size,28);
        color: #666;
      }
      .pro-choose,.city-choose{
        line-height:84/@r;
        .px2px(font-size,28);
        text-align: center;
        display: block;
      }
    }
  }
  .list{
    height:360/@r;
    overflow-y: scroll;
    overflow-x: hidden;
    display: none;
  }
  #submit{
    background-color: @basecolor;
    margin: 30/@r 30/@r 80/@r 30/@r;
    line-height:84/@r;
    color: #fff;
    display: block;
    .px2px(font-size,30);
    border-radius: 8/@r;
  }
  #bankcard,.card-pro,.card-city{
    position: relative;
    .list{
      position: absolute;
      left:0;
      top:100/@r;
      width: 100%;
      max-height:800/@r;
      background-color: #fff;
      z-index: 20;
      overflow-y: scroll;
      overflow-x:hidden;
    }
  }
  /*弹层选择器*/
  .main-box{
    position: absolute;
    top:10%;
    width: 80%;
    margin-left: -40%;
    left:50%;
    height: 80%;
    background-color: #fff;
    display: none;
    .list{
      width: 100%;
      height: 100%;
      background-color: #f4f4f4;
      overflow: scroll;
      border-radius: 4/@r;
      .bank-choose,.pro-choose,.city-choose{
        display: block;
        width: 100%;
        text-align: center;
        line-height: 80/@r;
        .px2px(font-size,28);
        border-bottom: 1px solid #e5e5e5;
      }
      .bank-choose.sure,.pro-choose.sure,.city-choose.sure{
        background-color: #0498e0;
        color: #fff;
      }
    }
    .btn-group{
      height:100/@r;
      position: absolute;
      bottom:-80/@r;
      left:0;
      width: 100%;
      .fl{
        display: inline-block;
        width: 50%;
        a{
          display: block;
          line-height:80/@r;
          .px2px(font-size,30);
          text-align: center;
          color: #333;
          border: 0.1rem solid #f5f5f5;
          border-radius: 4/@r;
          background-color: #ccc;
        }
      }
    }
  }
}
/*支付宝认证*/
.User-zfb{
  padding: 120/@r 30/@r;
  display: block;
  .main-box{
    border: 1px solid #e5e5e5;
    border-radius: 8/@r;
    h4{
      .px2px(font-size,30);
      line-height:82/@r;
      text-align: center;
      border-bottom: 1px solid #e5e5e5;
    }
    .zfbbox{
      margin-top: 30/@r;
      .fn-clear{
        margin: 30/@r 30/@r 0 30/@r;
        border: 1px solid #e5e5e5;
        .iconfont{
          line-height:80/@r;
          color:#cccccc;
          text-align: center;
          display: inline-block;
          width: 16%;
          .px2px(font-size,46);
        }
        input{
          line-height:80/@r;
          width: 84%;
          .px2px(font-size,30);
          border: 0;
        }
      }
    }
    .submit{
      line-height: 80/@r;
      .px2px(font-size,30);
      background-color: @basecolor;
      color: #fff;
      text-align: center;
      display: block;
      margin: 40/@r 30/@r 60/@r 30/@r;
      border-radius:40/@r 40/@r 40/@r 40/@r;
    }
  }
}
/*签名*/
/*签约银行卡确认页面*/
.User-banksure{
  margin-top: 90/@r;
  .surelist{
    padding-top: 20/@r;
    .card-news{
      background-color: #fff;
      .newlist{
        border-bottom:1px solid #e5e5e5;
        padding: 0 20/@r;
        .tit{
          .px2px(font-size,30);
          line-height:100/@r;
          width: 30%;
          display: inline-block;
          color: #333;
          .iconfont{
            color: #333;
            .px2px(font-size,30);
            line-height:100/@r;
          }
        }
        .con{
          .px2px(font-size,30);
          line-height: 100/@r;
          width: 70%;
          display: inline-block;
          color: #333;
          text-align: left;
          em{
            color: #333;
          }
        }
      }
    }
  }
  .register{
    margin: 20/@r 30/@r;
    border-radius: 8/@r;
    background-color:@basecolor;
    .px2px(font-size,30);
    line-height:84/@r;
    display: block;
    color: #fff;
  }
}
/*通用顶部附加样式*/
  #Login-register,#User-register,#more,#userdata,#User-link,#order-list{
  padding-top:88/@r;
  z-index:2;
  height: 100/@r;
  background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#28dbd1),to(#84eac8));
  background-image: -moz-linear-gradient(left 45deg, #28dbd1, #84eac8);
  background-image: -o-linear-gradient(45deg, #28dbd1, #84eac8);
  background-image: linear-gradient(45deg, #28dbd1, #84eac8);
}
/*通用横向列表样式*/
  /*更多*/
  .line-list{
    background-color: #fff;
    border-radius: 10/@r;
    box-shadow: @shadow;
    margin: 0 30/@r 30/@r 30/@r;
    .fn-clear{
      display: block;
      position: relative;
      padding: 0 0 0 30/@r;
      border-bottom: 1px solid #e5e5e5;
      >.fl{
        position: absolute;
        left:30/@r;
        top:0/@r;
        .px2px(font-size,40);
        line-height: 130/@r;
        color: @basecolor;
      }
      .start{
        margin-right: 60/@r;
      }
      .tl{
        .px2px(font-size,30);
        color: #666;
      }
      .txt{
        padding-left: 106/@r;
        color: #333;
        line-height: 130/@r;
        text-align: left;
        border: 0;
        .px2px(font-size,30);
        img{
          vertical-align: middle;
          height: 80/@r;
          line-height:130/@r;
          margin-right:76/@r;
        }
      }
      .arrow{
        margin-right: 40/@r;
      }
      .tr{
        text-align: right;
        margin-right: 30/@r;
        .px2px(font-size,30);
        color: #cecece;
      }
      .fr{
        position: absolute;
        right: 30/@r;
        color: #cecece;
        .px2px(font-size,30);
        top: 0;
        line-height:130/@r;
      }
    }
  }
  /*用户认证*/
  .line-list.approve{
    /*认证完成*/
    .list.sure{
      .iconfont{
        color: @basecolor;
      }
      .txt{
        color: #666;
      }
      .start{
        color: @basecolor;
      }
    }
    /*认证中*/
    .list.progress{
      .iconfont{
        color: #e6d85b;
      }
      .txt{
        color: #e6d85b;
      }
      .start{
        color: #e6d85b;
      }
    }
    /*未认证*/
    .list{
      color: #ccc;
      .iconfont{
        color: #ccc;
      }
      .txt{
        color: #ccc;
      }
      .start{
        color: #ccc;
      }
    }
  }
  .line-list:last-child{
    border-bottom: 0;
  }
/*图形验证码*/
#yzm-shadow-box{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: 12;
  #yzm-png-box{
    width: 600/@r;
    height: 480/@r;
    position: absolute;
    left: 50%;
    margin-left: -300/@r;
    top: 50%;
    margin-top: -240/@r;
    background-color: #fff;
    border-radius: 6/@r;
    h5{
      .px2px(font-size,36);
      text-align: center;
      display: block;
      border-bottom: 1px solid #e5e5e5;
      line-height:60/@r;
    }
    #yz-png{
      display: block;
      width: 400/@r;
      margin: 40/@r auto;
    }
    /*按钮组*/
    .png-btn-box{
      border-top: 1px solid #e5e5e5;
      position: absolute;
      bottom: 0;
      width: 100%;
      .png-btn{
        width: 50%;
        display: inline-block;
      }
      .sure-btn{
        border-right: 1px solid #e5e5e5;
      }
      .sure-btn,.cancel-btn{
        .px2px(font-size,32);
        line-height: 80/@r;
        text-align: center;
        color: #666;
        display: block;
        width: 100%;
      }
    }
    /*图形输入*/
    .yzm-png{
      margin: 10px 0;
      .tit{
        display: inline-block;
        width: 40%;
        .px2px(font-size,32);
        line-height: 60/@r;
        text-align: center;
      }
      .con{
        display: inline-block;
        width: 60%;
        .yzm-png-con{
          .px2px(font-size,32);
          line-height: 60/@r;
          width: 90%;
          border: 1px solid #e5e5e5;
          padding-left: 2%;
        }
      }
    }
    .yzm-msg{
      .re{
        color: #ff0000;
        .px2px(font-size, 24);
        line-height: 40/@r;
      }
      .gr{
        color: #00b058;
        .px2px(font-size, 24);
        line-height: 40/@r;
      }
    }
  }

}
/*验证码阴影弹窗*/
#yz-shadow{
  position: fixed;
  width: 100%;
  height:100%;
  background-color: rgba(0,0,0,0.6);
  z-index:12;
  left:0;
  top:0;
  display: none;
  .txt{
    display: block;
    width: 80%;
    left: 50%;
    margin-left: -40%;
    top:30%;
    position: absolute;
    .icon-guanbi{
      float: right;
      width: 4rem;
      .px2px(font-size,30);
      height:80/@r;
      text-align: center;
      margin-top: -60/@r;
      margin-right: -20/@r;
      color: #fff;
    }
    .box{
      padding: 40/@r 30/@r;
      background-color: #fff;
      border-radius: 12/@r;
      color: #333;
      .px2px(font-size,30);
      text-align: left;
    }
  }
}
/*分割行间距*/
.cut-line{
  height:24/@r;
  background-color: #f4f4f4;
  width: 100%;
}
/*主页*/
#Index{
  background-color:#eaf2f2;
  .header{
    height:480/@r;
    background-image: url("../images/index-bj.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    .swiper-container{
      height:480/@r;
    }
    /*轮播选中*/
    .swiper-container-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-custom,
    .swiper-pagination-fraction{
      bottom:120/@r;
      left:0;
      width:100%
    }
  }
  .content{
    display: block;
    padding: 240/@r 30/@r 158/@r 30/@r;
    margin: -88/@r auto 0 auto;
    position: relative;
    .main-tab{
      height: 208/@r;
      position: absolute;
      z-index:9999;
      top:0;
      width: 90%;
      left: 50%;
      background-color: #fff;
      display: flex;
      justify-content:space-between;
      border-radius: 10px;
      box-shadow: 0px 12px 28px 0px rgba(30, 217, 210, 0.28);
      margin: 0 auto 30/@r -45%;
      .btn{
        flex-grow:1;
        display: inline-block;
        width:110/@r;
        .icon{
          display: block;
          width: 110/@r;
          height: 110/@r;
          line-height: 110/@r;
          border-radius: 50%;
          .px2px(font-size,54);
          text-align: center;
          margin: 30/@r auto 14/@r auto;
          background-color: #fff;
          color: #fff;
        }
        .sale{
          background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#28dbd1),to(#84eac8));
          background-image: -moz-linear-gradient(left 45deg, #28dbd1, #84eac8);
          background-image: -o-linear-gradient(45deg, #28dbd1, #84eac8);
          background-image: linear-gradient(45deg, #28dbd1, #84eac8);
        }
        .shop{
          background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#f98c7c),to(#f9b07f));
          background-image: -moz-linear-gradient(left 45deg, #f98c7c, #f9b07f);
          background-image: -o-linear-gradient(45deg, #f98c7c, #f9b07f);
          background-image: linear-gradient(45deg, #f98c7c, #f9b07f);
        }
        .wallet{
          background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#5460ce),to(#2f92d7));
          background-image: -moz-linear-gradient(left 45deg, #5460ce, #2f92d7);
          background-image: -o-linear-gradient(45deg, #5460ce, #2f92d7);
          background-image: linear-gradient(45deg, #5460ce, #2f92d7);
        }
        .game{
          background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#b5429e),to(#ec849c));
          background-image: -moz-linear-gradient(left 45deg, #b5429e, #ec849c);
          background-image: -o-linear-gradient(45deg, #b5429e, #ec849c);
          background-image: linear-gradient(45deg, #b5429e, #ec849c);
        }
        .txt{
          text-align: center;
          .px2px(font-size,24);
          color: #666;
        }
      }
    }
    .main{
      box-shadow: 0px 12px 28px 0px rgba(30, 217, 210, 0.28);
      display: block;
      background-color: #fff;
      border-radius: 10/@r;
      margin-bottom: 30/@r;
      .header-img{
        width: 100%;
        display: block;
      }
      .con-txt{
        padding: 32/@r 40/@r;
        .tit{
          text-align: left;
          .px2px(font-size,30);
          line-height: 60/@r;
        }
        small{
          text-align: left;
          .px2px(font-size,24);
          .iconfont{
            vertical-align: middle;
            margin-right: 14/@r;
          }
        }
        .price{
          text-align: right;
          .px2px(font-size,38);
          line-height:60/@r;
          em{
            color:@fontcolor;
            .px2px(font-size,38);
          }
        }
      }
    }
    .recommend{
      box-shadow: @shadow;
    }
  }
}
/*商品列表展示(公用)*/
.recommend{
       background-color: #fff;
       padding-bottom: 28/@r;
       h4{
         .px2px(font-size,30);
         line-height: 100/@r;
         border-bottom: 1px solid #e5e5e5;
         margin: 0 40/@r;
         color: #666666;
         .iconfont{
           vertical-align: bottom;
           color: @fontcolor;
           margin-right: 18/@r;
           line-height: 100/@r;
           .px2px(font-size,40);
         }
       }
       .list{
         display: block;
         padding: 30/@r 0;
         margin: 0 30/@r;
         border-bottom: 1px solid #e5e5e5;
         .pro-con{
           width: 45%;
           display: inline-block;
           height:auto;
           .pro-img{
             width: 100%;
             display: block;
           }
         }
         .pro-txt{
           width: 50%;
           display: inline-block;
           padding-left: 5%;
           .name,.place,.price,.desc{
             text-align: left;
           }
           .placem,.price,.desc{
             line-height: 30/@r;
           }
           .name{
             .px2px(font-size,30);
             color: #666;
             line-height: 47/@r;
           }
           .place,.desc{
             .px2px(font-size,24);
             line-height: 30/@r;
           }
           .place .iconfont{
             margin-right: 10/@r;
           }
           .price{
             .px2px(font-size,28);
             line-height: 60/@r;
             em{
               .px2px(font-size,38);
               color: @basecolor;
               font-weight: bold;
               margin-right: 10/@r;
             }
           }
         }
       }
       #more-btn{
         display: block;
         margin: 30/@r 30/@r 0 30/@r;
         line-height: 88/@r;
         .px2px(font-size,30);
         background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(@start),to(@end));/* Safari 5.1 - 6.0 */
         background-image: -o-linear-gradient(30deg, @start, @end);
         background-image: -moz-linear-gradient(left 30deg, @start, @end);
         background-image: linear-gradient(30deg, @start, @end);
         color: #fff;
         border-radius: 44/@r 44/@r 44/@r;
       }
     }
/*商城部分*/
#office-list{
  padding-top: 88/@r;
  height: 100/@r;
  .btn-list{
    padding-bottom: 20/@r;
    position: fixed;
    left: 0;
    top: 88/@r;
    width: 100%;
    z-index: 2;
    .btn-group{
      width: 100%;
      overflow-y: scroll;
      white-space: nowrap;
      .btn{
        display:inline-block;
        .px2px(font-size,30);
        color: #fff;
        margin: 0 20/@r;
        text-align: center;
        line-height:74/@r;
      }
      .btn.sure{
        border-bottom: 2px solid #fff;
      }
    }
  }
  .box{
    height:74/@r;
    border-bottom: 2px solid #fff;
    display: block;
  }
}
/*商城详情页*/
#office-detail{
  padding-bottom: 140/@r;
  .header{
    /*轮播样式覆盖*/
    .swiper-container-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-custom,
    .swiper-pagination-fraction{
      bottom:100/@r;
      background-color: rgba(0,0,0,0.6);
      border-radius: 15/@r 15/@r 15/@r;
      width: 100/@r;
      line-height:30/@r;
      display: block;
      left:50%;
      position: absolute;
      margin-left: -50/@r;
      color: #fff;
    }
    .swiper-slide img{
      display: block;
      width: 100%;
      margin: auto;
    }
  }
  .content{
    .maindesc{
      margin: -80/@r 30/@r 0 30/@r;
      background-color: #fff;
      display: block;
      z-index:9;
      position: relative;
      left:0;
      top:0;
      border-radius: 10/@r;
      box-shadow: @shadow;
      li{
        margin: 0 30/@r;
        .px2px(font-size,30);
        line-height: 98/@r;
        color: #333333;
        border-bottom: 1px solid #e5e5e5;
        .txt{
          color: #333;
        }
        .time,.address
        {
          color: #8d8d8d;
          line-height:98/@r;
        }
        .fr{
          i{
            color: @basecolor;
            .px2px(font-size,30);
            line-height:98/@r;
          }
          color: #333;
        }
        .iconfont{
          line-height:33/@r;
          color:#ccc;
          .px2px(font-size,40);
          margin-right: 30/@r;
        }
      }
    }
    .warm{
      margin: 30/@r 30/@r 0 30/@r;
      padding: 30/@r;
      background-color: #fff;
      box-shadow: @shadow;
      border-radius: 10/@r;
      position: relative;
      .iconfont{
        position: absolute;
        left:30/@r;
        top:30/@r;
        .px2px(font-size,46);
        color: @basecolor;
      }
      .txt{
        padding-left: 74/@r;
        text-align: left;
        line-height:40/@r;
        font-size: 22/@r;
        color: #666;
        i{
          color: #333;
        }
      }
    }
    .tipdesc{
      margin: 30/@r 30/@r 0 30/@r;
      padding: 30/@r;
      background-color: #fff;
      box-shadow: @shadow;
      border-radius: 10/@r;
      position: relative;
      .iconfont{
        position: absolute;
        left:30/@r;
        top:30/@r;
        .px2px(font-size,46);
        color: @basecolor;
      }
      .txt{
        padding-left: 74/@r;
        text-align: left;
        line-height:40/@r;
        font-size: 22/@r;
        color: #666;
        i{
          color: #333;
        }
        .desc{
          text-align: left;
          padding-left: 110/@r;
        }
      }
    }
  }
  .footer-btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    height:131/@r;
    display: flex;
    background-color: #fff;
    z-index:19;
    .payment,.daikuan{
      display: inline-block;
      width: 48%;
      border-radius: 44/@r 44/@r 44/@r;
      height: 88/@r;
      margin-top: 30/@r;
      .px2px(font-size,30);
      .desc{
        line-height:50/@r;
        color: #666;
        .px2px(font-size,30);
      }
    }
    .payment{
      border: 1px solid #e5e5e5;
      .px2px(font-size,30);
      line-height:88/@r;
      margin: 30/@r 10/@r 0 10/@r;
    }
    .daikuan{
      .px2px(font-size,30);
      line-height:88/@r;
      color: #fff;
    }
  }
}
/*确认订单*/
#office-order{
  background-color: #f4f4f4;
  padding: 88/@r 30/@r 0 30/@r;
  height: 100/@r;
  .header{
    display: block;
    margin: auto;
    border: 10/@r solid #fff;
    border-radius: 10/@r;
    box-shadow: @shadow;
    .swiper-container{
      background-color: #f4f4f4;
    }
    .swiper-wrapper{
      img{
        display: block;
        width: 100%;
      }
    }
  }
  .content{
    margin-top: 30/@r;
    padding-bottom: 140/@r;
    .ugy{
      color: #ccc;
    }
    .line-list{
      margin-top: 30/@r;
      .txt{
        padding-left: 70/@r;
        .text{
          .px2px(font-size,30);
          color: #333;
          i{
            color: @basecolor;
            .px2px(font-size,30);
            line-height:98/@r;
          }
        }
        .tl{
          margin-left: 10/@r;
          color: #8d8d8d;
        }
      }
    }
  }
  .footer-btn{
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    height:131/@r;
    background-color: #fff;
    z-index:19;
    border-top: 1px solid #f4f4f4;
    .sum-pay{
      display: inline-block;
      width: 48%;
      color: #666;
      text-align: left;
      line-height: 131/@r;
      .px2px(font-size,30);
      em{
        color: @basecolor;
      }
    }
    #surepay{
      display: inline-block;
      width: 48%;
      border-radius: 44/@r 44/@r 44/@r;
      height: 88/@r;
      margin-top: 30/@r;
      .px2px(font-size,30);
      .desc{
        line-height:50/@r;
        color: #666;
        .px2px(font-size,30);
      }
    }
    .payment{
      border: 1px solid #e5e5e5;
      .px2px(font-size,30);
      line-height:88/@r;
      margin: 30/@r 10/@r 0 10/@r;
    }
    #surepay{
      .px2px(font-size,30);
      line-height:88/@r;
      color: #fff;
    }
  }
}
#paybtn-group{
  position: fixed;
  bottom: 0;
  display: block;
  width: 100%;
  height:131/@r;
  background-color: #fff;
  z-index:19;
  border-top: 1px solid #f4f4f4;
  .sum-pay{
    display: inline-block;
    width: 44%;
    color: #666;
    text-align: left;
    line-height: 131/@r;
    padding-left: 6%;
    .px2px(font-size,30);
    em{
      color: @basecolor;
    }
  }
  #surepay{
    display: inline-block;
    width: 44%;
    border-radius: 44/@r 44/@r 44/@r;
    height: 88/@r;
    margin-right: 6%;
    margin-top: 30/@r;
    .px2px(font-size,30);
    .desc{
      line-height:50/@r;
      color: #666;
      .px2px(font-size,30);
    }
  }
  .payment{
    border: 1px solid #e5e5e5;
    .px2px(font-size,30);
    line-height:88/@r;
    margin: 30/@r 10/@r 0 10/@r;
  }
  #surepay{
    .px2px(font-size,30);
    line-height:88/@r;
    color: #fff;
  }
}
#pay-faction-shadow{
  position: fixed;
  left:0;
  top:0;
  width: 100%;
  height:100%;
  background-color: rgba(0,0,0,0.6);
  z-index:20;
  display: none;
  .faction-sure,.discount-sure{
    .px2px(font-size,30);
    line-height: 80/@r;
    color: #fff;
    background-color: @basecolor;
    border-radius: 40/@r 40/@r 40/@r 40/@r;
    text-align: center;
    margin: 30/@r;
    display: block;
  }
  h4{
    line-height:80/@r;
    padding: 0 30/@r;
    color: #666;
    text-align: left;
    .px2px(font-size,30);
    border-bottom: 1px solid #e5e5e5;
  }
}
/*支付方式选择*/
#pay-faction-shadow{
  .faction-box{
    position: absolute;
    bottom: 0;
    width: 100%;
    left:0;
    background-color: #f4f4f4;
    .faction-list{
      .faction-con{
        border-bottom: 1px solid #e5e5e5;
        padding: 0 30/@r;
        vertical-align: middle;
        .txt{
          line-height: 80/@r;
          .px2px(font-size,30);
          color: #666;
          vertical-align: text-bottom;
          margin-left: 20/@r;
        }
        img{
          max-height: 80/@r;
        }
        .icon-dui{
          display:none;
        }
      }
      .faction-con.sure{
        background-color: #fff;
        .icon-dui{
          display: block;
          .px2px(font-size,46);
          line-height:80/@r;
          color: @basecolor;
        }
      }
    }
    .faction-sure,.discount-sure{
      line-height: 80/@r;
      .px2px(font-size,30);
      color: #fff;
      text-align: center;
      border-radius: 40/@r 40/@r 40/@r 40/@r;
    }
  }
}
/*我的订单*/
#order-list{
  height: 100/@r;
  padding: 80/@r 30/@r;
  #main-list{
    .load-list{
      .mainbox{
        box-shadow: @shadow;
        background-color: #fff;
        position: relative;
        border-radius: 20/@r;
        margin-bottom: 20/@r;
        padding-top: 30/@r;
        .times{
          display: block;
          text-align: left;
          color: #8d8d8d;
          .px2px(font-size,24);
          line-height:84/@r;
          padding: 0 30/@r;
          border-bottom: 1px solid #e5e5e5;
        }
        .order-png{
          margin-left: 30/@r;
          margin-top: 20/@r;
          max-height: 100/@r;
          width: 146/@r;
          display: inline-block;
          vertical-align: bottom;
          position: absolute;
          left: 0;
          top: 20/@r;
        }
        .txt{
          padding-left: 206/@r;
          .name{
            color: #333;
            .px2px(font-size,30);
          }
          .place .iconfont{
            margin-right: 10/@r;
          }
          .price{
            .px2px(font-size,28);
            line-height: 60/@r;
            em{
              .px2px(font-size,38);
              color: @basecolor;
              font-weight: bold;
              margin-right: 10/@r;
            }
          }
          .name,.place,.price,.desc{
            text-align: left;
          }
        }
        .start{
          position: absolute;
          right:30/@r;
          top:0;
          line-height: 160/@r;
        }
        .start.re{
          color: #ff0000;
        }
        .start.end{
          color: #666;
        }
      }
    }
  }
}
/**================**/
/*借款*/
/*借款首页*/
#loans-index{
  padding: 88/@r 30/@r 0 30/@r;
  height: 100/@r;
  display: block;
  .box{
    display: block;
    background-color: #fff;
    border-radius: 10/@r;
    color: #666;
    box-shadow:@shadow;
    .content{
      padding: 30/@r;
      .px2px(font-size,24);
    }
    .sum{
      color: #333;
      .px2px(font-size,60);
      line-height:100/@r;
      text-align: left;
      font-weight: bold;
    }
    .earn{
      color: @basecolor;
      text-align: left;
      line-height:60/@r;
      .px2px(font-size,30);
    }
    .tip{
      color: #666;
      background-color: #f6fcfc;
      padding: 20/@r 30/@r 20/@r 30/@r;
      line-height:50/@r;
      .px2px(font-size,30);
      .small-tip{
        color: #999;
        line-height:40/@r;
        .px2px(font-size,24);
        text-align: left;
      }
    }
  }
  #submit{
    .px2px(font-size,30);
    line-height:80/@r;
    color:#fff;
    display: block;
    padding: 0 30/@r;
    margin-top: 30/@r;
    border-radius: 40/@r 40/@r 40/@r;
  }
}
/*借款提示信息*/
#shadow-tip{
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  display: none;
  .tip-box{
    position: absolute;
    width: 460/@r;
    padding: 0 40/@r;
    height: 100%;
    left: 50%;
    margin-left: -270/@r;
    top: 20%;
    background-color: #fff;
    h4{
      padding: 20/@r 30/@r;
      text-align: center;
      padding-top: 68/@r;
      line-height: 50/@r;
      .px2px(font-size,42);
      color: #333;
    }
    .top-line{
      display: flex;
      width: 80%;
      margin: 10/@r auto 24/@r auto;
      .line{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        height: 30/@r;
        flex: 1;
        border-bottom: 1px solid #dbe1e6;
      }
      .iconfont{
        width: 30/@r;
        line-height: 60/@r;
        padding: 0 20/@r;
        .px2px(font-size,30);
        color: #dbe1e6;
        display: inline-block;
      }
    }
    .tip-txt{
      color: #8d8d8d;
      .px2px(font-size,30);
      line-height: 40/@r;
      i{
        color: #666;
      }
    }
  }
}
/*立即借款*/
#borrow-header-bj{
  width: 100%;
  height: 100/@r;
  z-index: 0;
  margin-top: 80/@r;
  display: block;
}
#borrow-index{
  margin-top: -100/@r;
  padding: 0 30/@r 0 30/@r;
  .small-tip{
    line-height: 60/@r;
    color: #fff;
    .px2px(font-size, 30);
    em{
      color: #fff;
      line-height: 60/@r;
      .px2px(font-size,30);
    }
  }
  .pay{
    border-radius: 10/@r;
    background-color: #fff;
    box-shadow: @shadow;
  }
  .borrow-list{
    height:80/@r;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 20/@r;
    .fl{
      display: inline-block;
      width: 30%;
      color: #333;
      .px2px(font-size,30);
      line-height:80/@r;
      text-align: center;
    }
    .fr{
      display: inline-block;
      width: 70%;
      height:80/@r;
      .px2px(font-size,30);
      line-height:80/@r;
      color: #999;
      text-align: right;
      input{
        display: inline-block;
        line-height:80/@r;
        width: 80%;
        .px2px(font-size,30);
        color:#cccccc;
        border: none;
        margin: 0;
        padding: 0;
        text-align: right;
      }
      em{
        color: #999;
        line-height:80/@r;
        width: 16%;
        padding-left: 4%;
        display: inline-block;
        .px2px(font-size,30);
      }
    }
  }
  .line-list{
    margin: 30/@r 0;
      .txt{
      padding-left: 0;
    }
  }
  /*亲属*/
  .line-list.relative{
    .txt{
      display:block;
      line-height: 60/@r;
      padding: 30/@r 0 ;
      .px2px(font-size,30);
    }
    .small-txt{
      text-align: left;
      line-height: 30/@r;
      display: block;
      padding-right: 100/@r;
      .px2px(font-size,24);
    }
    .icon-jiantou1{
      line-height: 180/@r;
    }
  }
  /*银行卡*/
  .banks{
    position: relative;
    .bank-img{
      position: absolute;
      left:30/@r;
      top:20/@r;
      width: 80/@r;
      height: 80/@r;
      margin-top: 40/@r;
    }
    .txt{
      padding-top: 40/@r;
      padding-left: 120/@r;
      color: #333;
      height: 160/@r;
      .px2px(font-size,30);
      line-height: 60/@r;
      .small-txt{
        color: #8d8d8d;
        line-height: 50/@r;
        .px2px(font-size,24);
        text-align: left;
        display: block;
      }
      .tr{
        line-height: 180/@r;
        margin-right: 60/@r;
      }
    }
    .icon-jiantou1{
      line-height: 180/@r;
    }
  }
  #signature-png{
    display: block;
    padding: 20/@r;
    background-image: url('../images/qianming.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    height: 200px;
    img{
      display: block;
      width: 100%;
    }
  }
}
/*签名*/
#signature-shadow{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index:10;
  display: none;
  background-color: rgba(0,0,0,0.6);
  .signature{
    position: absolute;
    bottom:0;
    left:0;
    height: 280px;
    width: 90%;
    padding: 30/@r 5% 0 5%;
    background-color: #f4f4f4;
    border-top: 1px solid #e5e5e5;
    .qianming-tip{
      .px2px(font-size,30);
      line-height: 40/@r;
    }
    .btn-groups{
      display: flex;
      justify-content:space-between;
      .btn{
        flex-grow:1;
        line-height: 60/@r;
        color: #666;
        border-radius: 10/@r;
        .px2px(font-size,30);
        border: 1px solid #ccc;
        margin: 0 10/@r;
        background-color: #fff;
      }
      .btn.gry{
        color: #e5e5e5;
      }
    }
  }
}
/*亲属信息*/
#User-link{
  height: 200/@r;
  .main-list{
    margin: 0 30/@r 20/@r 30/@r;
    box-shadow: @shadow;
    border-radius: 10/@r;
    background-color: #fff;
  }
  .tit-top{
    .px2px(font-size,30);
    color: #333;
    padding: 0 30/@r;
    line-height:100/@r;
    text-align: left;
  }
  .form{
    display: block;
    padding: 0 30/@r;
    >ul{
      >li{
        line-height:100/@r;
      }
      .tit{
        color: #666;
        .px2px(font-size,30);
        display: inline-block;
        width: 40%;
      }
      .con{
        display: inline-block;
        width: 60%;
        #picker1,#picker2{
          .px2px(font-size,30);
          color: #666;
          line-height:100/@r;
          text-align: right;
          em{
            .px2px(font-size,30);
            line-height:100/@r;
            color: #e5e5e5;
          }
        }
        input{
          line-height:100/@r;
          color: #666;
          text-align: right;
          width: 100%;
          .px2px(font-size,30)
        }
      }
    }
    .rginpassword{
      border-bottom: 1px solid #e5e5e5;
    }
  }
  .baocun{
    line-height:100/@r;
    .px2px(font-size,36);
    color: #fff;
    background-color: @basecolor;
    text-align: center;
    display: block;
    margin:0 30/@r;
    border-radius: 8/@r;
  }
}
/*借款列表*/
#borrow-list{
  height: 100/@r;
  padding: 80/@r 30/@r;
  #main-list{
    padding-top: 100/@r;
    .load-list{
      .mainbox{
        display: block;
        box-shadow: @shadow;
        background-color: #fff;
        position: relative;
        border-radius: 20/@r;
        margin-bottom: 20/@r;
        padding: 20/@r 30/@r;
        >.fl{
          display:inline-block;
          width: 70%;
          .pay,.status{
            color: #8d8d8d;
            .px2px(font-size,30);
            text-align: left;
            .num{
              color: #333;
              .px2px(font-size,30);
            }
            .main{
              color: #8d8d8d;
            }
            .main.success{
              color: @basecolor
            }
            .main.error{
              color: @warm;
            }
          }
          .time{
            color: #ccc;
            .px2px(font-size,24);
            text-align: left;
          }
        }
        >.fr{
          display: inline-block;
          width: 30%;
          .topstyle,.renewal{
            padding: 0 20/@r;
            .px2px(font-size,24);
            line-height: 40/@r;
            display: block;
            margin-bottom: 20/@r;
          }
          .topstyle{
            border-radius:20/@r;
            color: #fff;
          }
          .renewal{
            border-radius: 20/@r;
            color: #666;
            border: 1px solid #e5e5e5;
          }
        }
        >.fr.detail{
            line-height:120/@r;
            text-align: right;
            .px2px(font-size, 30);
            .iconfont{
                padding-left: 20/@r;
            }
        }
        .more{
          line-height: 120/@r;
          color: #8d8d8d;
        }
      }
    }
  }
}
/*还款*/
/*还款主页*/
#refund-index{
  height: 100/@r;
  background-color: @basecolor;
  padding: 88/@r 30/@r 0 30/@r;
  .progress{
    .order{
      .iconfont{
        top: 60/@r;
        position:absolute;
        right:30/@r;
        color: #cccccc;
        .px2px(font-size,40);
      }
    }
    .ahead{
      .sum-txt{
        display: inline-block;
        position: absolute;
        top:60/@r;
        right:30/@r;
        color: #cccccc;
        .px2px(font-size,30);
        .iconfont{
          color: #cccccc;
          .px2px(font-size,40);
        }
      }
    }
    .order,.ahead{
      display:block;
      box-shadow: @shadow;
      position: relative;
      padding: 20/@r 30/@r;
      background-color: #fff;
      margin-top: 30/@r;
      border-radius: 10/@r;
      .time{
        color: #878788;
        .px2px(font-size,24);
        line-height: 50/@r;
        text-align: left
      }
      .money,.title{
        color: #333;
        text-align: left;
        .px2px(font-size,30);
        line-height: 60/@r;
      }
      .small-tip{
        text-align: left;
        color: #878788;
        .px2px(font-size,24);
        line-height: 50/@r;
      }
    }
  }
}
#refund-index,#refund-detail{
  .order{
    display: block;
    padding-top: 40/@r;
    .content{
      background-color: #fff;
      display: block;
      border-radius: 10/@r;
      box-shadow: @shadow;
      padding: 20/@r 0;
      .title{
          .px2px(font-size,32);
          line-height: 50/@r;
          text-align: center;
          color: #333;
      }
      .money{
        .px2px(font-size,50);
        line-height: 80/@r;
        color: @basecolor;
      }
      .main-txt{
        .px2px(font-size,24);
        line-height: 50/@r;
        color: @basecolor;
        i{
          color: #878787;
          .px2px(font-size,24);
          line-height: 50/@r;
        }
      }
    }
  }
}
#refund-detail{
  height: 100/@r;
  background-color: @basecolor;
  padding: 88/@r 30/@r 0 30/@r;
  .main-detail{
    margin-top: 20/@r;
    border-radius: 10/@r;
    box-shadow: @shadow;
    background-color: #fff;
    .main-line{
      padding: 20/@r 0;
      margin: 0 30/@r;
      border-bottom: 1px dashed #e5e5e5;
      .con-l{
        .money{
          color: #666;
          line-height: 60/@r;
          .px2px(font-size,30);
          font-weight: bold;
          text-align: left;
        }
        .time{
          line-height: 50/@r;
          .px2px(font-size,24);
          color: #8d8d8d;
        }
      }
      .con-r{
        color: #ccc;
        .px2px(font-size,24);
      }
    }
    .main-txt{
      padding: 20/@r 30/@r;
      .tit,.desc{
        color: #8d8d8d;
        .px2px(font-size,24);
        line-height: 50/@r;
      }
    }
  }
}
/*还款金额页面*/
#refund-pay{
  height: 100/@r;
  background-color: @basecolor;
  padding: 88/@r 30/@r 0 30/@r;
  .small-tip{
    line-height: 60/@r;
    color: #fff;
    .px2px(font-size, 30);
    em{
      color: #fff;
      line-height: 60/@r;
      .px2px(font-size,30);
    }
  }
  .pay{
    border-radius: 10/@r;
    background-color: #fff;
    box-shadow: @shadow;
    margin-top: 30/@r;
    p{
      text-align: left;
      line-height: 60/@r;
      .px2px(font-size,30);
      padding: 0 40/@r;
      i{
        color: @basecolor;
        line-height: 60/@r;
        .px2px(font-size,30);
      }
    }
  }
  .borrow-list{
    height:80/@r;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 20/@r;
    .fl{
      display: inline-block;
      width: 30%;
      color: #333;
      .px2px(font-size,30);
      line-height:80/@r;
      text-align: center;
    }
    .fr{
      display: inline-block;
      width: 70%;
      height:80/@r;
      .px2px(font-size,30);
      line-height:80/@r;
      color: #999;
      text-align: right;
      input{
        display: inline-block;
        line-height:80/@r;
        width: 80%;
        .px2px(font-size,30);
        color:#cccccc;
        border: none;
        margin: 0;
        padding: 0;
        text-align: right;
      }
      em{
        color: #999;
        line-height:80/@r;
        width: 16%;
        padding-left: 4%;
        display: inline-block;
        .px2px(font-size,30);
      }
    }
  }
  .line-list{
    margin: 30/@r 0;
      .txt{
      padding-left: 0;
    }
    .list{
      i{
        color: @basecolor;
      }
      .sumpay{
        color: #666;
      }
      .tip{
        text-align: left;
        padding: 20/@r 30/@r;
        line-height: 50/@r;
        .px2px(font-size,24);
        i{
          color: @basecolor;
        }
      }
      .fn-clear{
        border-bottom: 0;
        .txt{
         border-bottom: 1px solid #e5e5e5;
        }
      }
    }
  }
}
#pay-shadow{
  display: none;
  position:fixed;
  left: 0;
  top: 0;
  width: 100%;
  height:100%;
  z-index: 12;
  background-color: rgba(0,0,0,0.6);
  .pay-choose{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    left: 0;
    .tit{
      text-align: left;
      .px2px(font-size,30);
      line-height: 60/@r;
      color: #666;
      padding: 20/@r 30/@r;
      border-bottom: 1px solid #e5e5e5;
    }
    .choose-form{
      background-color: #f4f4f4;
      .fn-clear{
        display: block;
        padding: 0 20/@r 0 180/@r;
        position: relative;
        left:0;top:0;
        line-height: 120/@r;
        text-align: left;
        .px2px(font-size,30);
        border-bottom: 1px solid #e5e5e5;
        img{
          width: 100/@r;
          position: absolute;
          left:30/@r;
          top: 20/@r;
        }
        em{
          color: rgba(0,0,0,0);
        }
      }
      .fn-clear.sure{
        background-color: #fff;
        em{
          color: @basecolor;
        }
      }
    }
  }
}
/*提前还贷款列表页面*/
#refund-list{
  padding: 100/@r 30/@r 0 30/@r;
  height: 100/@r;
  .list{
    display: block;
    .con{
      box-shadow: @shadow;
      background-color: #fff;
      border-radius: 10/@r;
      margin-bottom: 20/@r;
      .box{
        padding: 30/@r 20/@r;
        display: block;
        .fl{
          display: inline-block;
          width: 70%;
        }
        .fr{
          display: inline-block;
          width: 30%;
        }
        .money{
          color: #333;
          .px2px(font-size,30);
          line-height: 80/@r;
          text-align: left;
        }
        .status{
          color: #8d8d8d;
          .px2px(font-size,24);
          line-height: 50/@r;
          text-align: left;
        }
        .iconfont{
          color: #fff;
          line-height: 120/@r;
          .px2px(font-size,40);
          text-align: right;
          display: block;
        }
      }
      .box.sure{
        .iconfont{
          color: @basecolor
        }
      }
      .time{
        display: block;
        padding: 30/@r 20/@r;
        color: #8d8d8d;
        .px2px(font-size,24);
        line-height: 50/@r;
        span{
          color: #8d8d8d;
          .px2px(font-size,24);
          line-height: 50/@r;
        }
      }
    }
  }
}
/*借款还款结果*/
#result{
  height: 100/@r;
  padding-top: 88/@r;
  .main{
    display: block;

    background-color: #fff;
    border-radius: 10/@r;
    box-shadow: @shadow;
    margin:20/@r 30/@r;
    .iconfont{
      display: block;
      text-align: center;
      padding-top: 40/@r;
      .px2px(font-size,120);
      line-height: 120/@r;
      color: @basecolor;
      background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#00ded3));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-bottom: 40/@r;
    }
    .status{
      .px2px(font-size,40);
      color:#333;
      line-height: 60/@r;
      font-weight: bold;
    }
    .money{
      font-weight: bold;
      color: #333;
      .px2px(font-size,40);
      line-height: 60/@r;
    }
    .reason{
      color: #333;
      .px2px(font-size,30);
      line-height: 40/@r;
    }
    .time{
      color: #999;
      .px2px(font-size,30);
      line-height: 40/@r;
      padding-bottom: 50/@r;
    }
    .warm{
      color: @warm;
      background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ff0000));
    }
  }
}
/*发现*/
#discover{
  padding-top: 88/@r;
  padding-bottom: 132/@r;
  img{
    display: block;
    width: 100%;
  }
  .sort-list{
    margin: 30/@r;
    box-shadow: @shadow;
    border-radius: 10/@r;
    h4{
      line-height:60/@r;
      color: #666;
      .px2px(font-size,30);
      margin-left: 30/@r;
      border-bottom: 1px solid #e5e5e5;
      i{
        width: 4/@r;
        background-color: @basecolor;
        margin-top: 40/@r;
        height: 30/@r;
        display: inline-block;
        margin-right: 14/@r;
      }
    }
    .main-sort{
      .fl{
        display: inline-block;
        width: 25%;
        a{
          padding: 30/@r 0;
          display: block;
        }
        a:active{
          background-color: #cfeeed;
          color: #fff;
        }
        a:active *{
          color: #fff;
        }
        em{
          display: block;
          text-align: center;
          line-height: 65/@r;
          .px2px(font-size,60);
        }
        .sort-txt{
          line-height:60/@r;
          .px2px(font-size,30);
        }
      }
      .icon-shouji11{
        color: #8bfcfe;
      }
      .icon-liuliang-{
        color: #9abdeb;
      }
      .icon-dianfei{
        color: #e8c3fd;
      }
      .icon-7{
        color: #fcc989;
      }
      .icon-shuifei{
        color: #e8c3fd;
      }
      .icon-chexiandingdanSVG--{
        color:#fdd39e;
      }
      .iconfont.icon-gongjijin-{
        color:#e8c3fd;
        font-size: 70/@r;
      }
      .icon-zhengxinfuwu{
        color: #fc7878;
      }
      .icon-shebao{
        color: #abc1ff;
      }
    }
  }
}
/*详情页*/
#detail{
  .swiper-container{
    height:480/@r;
  }
  /*轮播选中*/
  .swiper-container-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-custom,
  .swiper-pagination-fraction{
    bottom:120/@r;
    left:0;
    width:100%
  }
}
/*用户中心*/
#user{
  padding-bottom: 130/@r;
  .head-main{
    background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#28dbd1),to(#84eac8));
    background-image: -moz-linear-gradient(top 0deg, #28dbd1, #84eac8);
    background-image: -o-linear-gradient(0deg, #28dbd1, #84eac8);
    background-image: linear-gradient(0deg, #28dbd1, #84eac8);
    .head{
      border: 20/@r solid #7ae9d3;
      border-radius: 50%;
      width: 174/@r;
      margin: 0 auto 40/@r auto;
      display: block;
      img{
        width:136/@r;
        display: block;
        margin: auto;
        border: 20/@r solid #95eddc;
        border-radius: 50%;
        height: 136/@r;
      }
    }
    .header{
      background: none;
      position: relative;
      .header-tit{
        color: #fff;
        display: block;
        text-align: center;
        .px2px(font-size,30);
        line-height: 88/@r;
      }
      .icon-xiaoxi{
        right:20/@r;
        top:0;
        .px2px(font-size,50);
        position: absolute;
        line-height: 88/@r;
        color: #fff;
      }
    }
  }
  #user-price{
    margin:  -90/@r 30/@r 0 30/@r;
  }
  .user-txt{
    .px2px(font-size,30);
    line-height: 40/@r;
    color: #fff;
    padding-bottom: 120/@r;
    a{
      color: #fff;
      line-height: 40/@r;
      .px2px(font-size,30);
    }
  }
  #user-price{
    box-shadow: @shadow;
    margin: -90/@r 30/@r 26/@r 30/@r;
    background-color: #fff;
    border-radius: 10/@r;
    padding: 40/@r 0;
    border-radius: 10/@r;
    .extra{
      width: 60%;
    }
    .integral{
      width: 40%;
    }
    .extra,.integral{
      text-align: center;
      display: inline-block;
      em{
        color: @basecolor;
        .px2px(font-size,30);
        line-height: 40/@r;
        font-weight: bold;
      }

    }
  }
}
/*系统消息*/
#news-index{
  padding-top: 100/@r;
  .lists{
    background-color: #fff;
    position: relative;
    border-bottom: 2/@r solid #e5e5e5;
    .icon{
      display: block;
      padding: 0 32/@r;
      .iconfont{
        line-height:118/@r;
        color: @basecolor;
        display: inline-block;
        width: 10%;
        text-align: center;
        .px2px(font-size,30);
      }
      .tit{
        display: inline-block;
        width: 90%;
        text-align: left;
        .px2px(font-size,30px);
        color: #333;
        line-height:112/@r;
        .iconfont{
          font-size: 28/@r solid #333;
          line-height: 112/@r;
          color: #ccc;
        }
        .mydate{
          margin-right: 20/@r;
          color: #333;
        }
      }
    }
    .con{
      display: none;
      padding: 20/@r 32/@r;
      .tip-txt{
        .px2px(font-size,28px);
        line-height:60/@r;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .date{
      font-size: 28/@r;
      line-height:120/@r;
      color: @basecolor;
      margin-right: 40/@r;
    }
  }
}
/*页脚*/
#footer-btn{
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 98/@r;
  border-top:1px solid #e5e5e5;
  display: flex;
  justify-content:space-between;
  background-color: #fff;
  .btn{
    flex-grow: 1;
    justify-content:space-between;
    .iconfont{
      line-height:60/@r;
      height: 60/@r;
      .px2px(font-size,46);
      display: inline-block;
      width: 100%;
      color:#666;
      text-align: center;
    }
    .btn-txt{
      line-height:38/@r;
      .px2px(font-size,18);
      color: #8e8e8e;
      font-weight: 200;
    }
  }
  .btn.sure{
    .iconfont{
      color:@basecolor;
      text-shadow: none;
    }
    .btn-txt{
      color: @basecolor;
    }
  }
}
/*加载图片*/
#load{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 999999;
  display: none;
  img{
    width: 200/@r;
    height: 200/@r;
    position: absolute;
    left: 50%;
    margin-left: -100/@r;
    top: 50%;
    margin-top: -100/@r;
  }
  .txt-msg{
    font-size: 28/@r;
    line-height: 60/@r;
    position: absolute;
    color: #fff;
    width: 400/@r;
    height: 60/@r;
    bottom: 80/@r;
    text-align: center;
    left: 50%;
    margin-left: -200/@r;
  }
}
/*错误提示*/
#tip{
  .re,.gr{
    display: block;
    text-align: center;
    .px2px(font-size, 30);
    line-height:80/@r;
  }
  .re{
    color: @warm;
  }
  .gr{
    color: @basecolor;
  }
}
/*吐司弹框*/
.msg{
  position: fixed;
  width: 80%;
  height: 4rem;
  font-size: 1.4rem;
  line-height:4rem;
  bottom: 2rem;
  z-index: 14;
  text-align: center;
  left: 50%;
  margin-left: -40%;
  background-color: rgba(0,0,0,0.4);
  border-radius: 0.4rem;
  color: #fff;
  opacity: 0;
  display: none;
  span{
    display: block;
    font-size: 1.4rem;
    line-height:4rem;
  }
}
.msg.tusidonghua{
  animation: fade-in;/*动画名称*/
  animation-duration: 2s;/*动画持续时间*/
  -webkit-animation:fade-in 2s;/*针对webkit内核*/
  display: block;
}

/*按钮通用样式*/
.changebtn{
  background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#28dbd1),to(#84eac8));
  background-image: -moz-linear-gradient(left 45deg, #28dbd1, #84eac8);
  background-image: -o-linear-gradient(45deg, #28dbd1, #84eac8);
  background-image: linear-gradient(45deg, #28dbd1, #84eac8);
  text-align: center;
  .px2px(font-size,30);
  letter-spacing:1/@r;
  display: block;
  line-height:80/@r;
  color: #fff;
  border-radius: 40/@r 40/@r 40/@r;
  margin: 40/@r 30/@r;
}
.changebtn:active{
  text-align: center;
  .px2px(font-size,30);
  letter-spacing:1/@r;
  display: block;
  line-height:80/@r;
  color: #fff;
  border-radius: 40/@r 40/@r 40/@r;
  margin: 40/@r 30/@r;
  background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#84eac8),to(#28dbd1));
  background-image: -moz-linear-gradient(left 0deg, #84eac8, #28dbd1);
  background-image: -o-linear-gradient(0deg, #84eac8, #28dbd1);
  background-image: linear-gradient(0deg, #84eac8, #28dbd1);
}
/*定义图片rem*/
/*提示文字背景颜色定义*/
.bodymsg{
  position: fixed;
  bottom:0;
  width: 100%;
  z-index: 14;
  text-align: center;
  span{
    font-size: 16px;
    background: @basecolor;
    color: #fff;
    border-radius: 6px;
    line-height: 1rem;
    padding: 0.3rem 0.6rem;
  }
}
/*通用顶部颜色*/
.topstyle{
  background-image: -webkit-gradient(linear, 0 100% , 100% 0, from(#28dbd1),to(#84eac8));
  background-image: -moz-linear-gradient(left 45deg, #28dbd1, #84eac8);
  background-image: -o-linear-gradient(45deg, #28dbd1, #84eac8);
  background-image: linear-gradient(45deg, #28dbd1, #84eac8);
}
/*通用单选框*/
#check_box{
  display:inline-block;
  position:relative;
  padding-left: 60/@r;
  color: #333;
  .px2px(font-size,30);
  line-height:60/@r;
  a{
    .px2px(font-size,30);
    color: @basecolor;
  }
  label{
    width:32/@r;
    height:32/@r;
    position:absolute;
    top:16/@r;
    left:0;
    border:1px solid #cacaca;
    border-radius:4/@r;
    background:#fff;
    cursor:pointer;
  }
  #check_2{
    position: absolute;
    left:0rem;
    top:16/@r;
  }
  label:hover{
    border:2px solid @basecolor;
  }
  label:after{
    content:'';
    width:16/@r;
    height:8/@r;
    position:absolute;
    top:8/@r;
    left:6/@r;
    border:2px solid #cacaca;
    border-top:none;
    border-right:none;
    opacity:0.4;
    transform:rotate(-45deg); /*-webkit-transform:rotate(-45deg);*/
  }
  label:hover:after{
    border:2px solid @basecolor;
    border-top:none;
    border-right:none;
  }
  input:checked + label{
    border:2px solid @basecolor;
  }
  input:checked + label:after{
    opacity:1;
    border:2px solid @basecolor;
    border-top:none;
    border-right:none;
  }
  em{
    margin:0 0 0 5px;
  }
  .models-sure{
    .px2px(font-size,24);
    margin: 1rem 1.5rem;
    line-height:60/@r;
    color:#fff;
    background-color: @basecolor;
    border-radius: 8/@r;
    display: block;
  }
}
/*提示文字信息*/
#msg{
  .px2px(font-size,30);
  line-height: 60/@r;
  .re{
    color: #ff0000;
    .px2px(font-size,30);
    line-height: 60/@r;
  }
  .gr{
    color: #00b058;
    .px2px(font-size,30);
    line-height: 60/@r;
  }
}
